<template>
    <div class="changePassword">
        <!--标题表头-->
        <div class="changePassword_container_top">
            <span>修改密码</span>
        </div>
        <!--提交列表-->
        <div class="changePassword_container_content">
            <div class="normal-form-container bottom-ash-line" style="border-bottom: none">
                <van-field type="tel" v-model="forma.phone" placeholder="请输入手机号（登陆账号）" :error-message="errorMsg.phone"/>
                <van-field v-model="forma.checkCode" placeholder="请输入验证码">
                    <van-button slot="button" size="small" :error-message="errorMsg.checkCode"
                                @click="sendMobileCode" type="primary" class="check-button" round>
                        {{countdownText}}
                    </van-button>
                </van-field>
                <van-field v-model="forma.password" :error-message="errorMsg.password" placeholder="请输入登录密码"/>
                <van-field v-model="forma.repassword" :error-message="errorMsg.repassword" placeholder="请确认登录密码"/>
            </div>
        </div>
        <!--按钮样式-->
        <div class="changePassword_container_btn">
            <van-button type="primary"  @click="eventClickSubmit" class="green-background font-size-17 edge-angle-normal">确认修改</van-button>
        </div>
    </div>
</template>

<script>
    import { Field, CellGroup, Button, Dialog } from 'vant';
    import validator from '../../libs/js/validator.js';

    export default {
        name: "changePassword",
        components: {
            [Field.name]: Field, [CellGroup.name]: CellGroup, [Button.name]: Button
        },
        data() {
            return {
                countdown: 0,
                countdownText: '验证码',
                forma: {
                    phone: '',
                    checkCode: '',
                    password: '',
                    repassword: '',
                },
                errorMsg: {
                    phone: '',
                    checkCode: '',
                    password: '',
                    repassword: '',
                },
                rules: {
                    phone: [
                        {
                            validator: (rule, value, callback) => {
                                if (!value) {
                                    callback('请输入手机号码');
                                } else if (/^[1][0-9]{10}$/.test(value)) {
                                    callback();
                                } else {
                                    callback('请输入正确的手机号码');
                                }
                            }
                        }
                    ],
                    checkCode: [
                        {required: true, message: '请输入验证码'}
                    ],
                    password: [
                        {required: true, message: '请输入登录密码'}
                    ],
                    repassword: [
                        {required: true, message: '请输入确认登录密码'}
                    ],
                },
            }
        },
        created() {
            this.validator = validator(this.rules,this.forma);
        },
        methods: {
            resetField(attrs) {
                attrs = !attrs ? Object.keys(this.errorMsg) : (Array.isArray(attrs) ? attrs : [attrs]);
                attrs.forEach(attr => {
                    this.errorMsg[attr] = ''
                })
            },
            validate(callback, data) {
                this.validator.validate((errors, fields) => {
                    this.resetField();
                    if (errors) {
                        fields.forEach(item => {
                            this.errorMsg[item.field] = item.message
                        })
                    }
                    callback && callback(errors, fields)
                }, data);
            },
            //发送验证码
            sendMobileCode() {
                this.validate(errors => {
                    if (!errors) {
                        // console.log('发送成功');
                        let url = '/api/home/senMsg',
                            params = {
                                mobile: this.forma.phone
                            };
                        this.$util.postRequestInterface(url, params, (res) => {});
                        
                        this.countdown = 61;
                        this.countdownSubtract();
                    }
                }, 'phone')
            },
            //验证码倒计时
            countdownSubtract() {
                if (this.countdown > 0) {
                    setTimeout(() => {
                        this.countdown -= 1;
                        if (this.countdown>0){
                            this.countdownText = '倒计时'+this.countdown+'s';
                            this.countdownSubtract();
                        }else if (this.countdown==0){
                            this.countdownText = '验证码'
                        }
                    }, 1000)
                }
            },
            eventClickSubmit() {
                this.validate((errors, fields) => {
                    if (!errors) {
                        if (this.forma.password != this.forma.repassword) {
                            Toast.fail('请确认登录密码');
                            return false;
                        }
                        var url = '/api/home/user/forgetpass';
                        var param = {
                            phone: this.forma.phone,
                            code: this.forma.checkCode,
                            newpwd: this.forma.password,
                            renewpwd:this.forma.repassword,
                        };
                        this.$util.postRequestInterface(url, param, (res) => {
                            Dialog.alert({
                                title:'提示',
                                message:res.msg
                            }).then(()=>{
                                this.$router.push('/login');
                            })
                        });
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .changePassword {
        width: 100%;

        .changePassword_container_top {
            width: 95%;
            margin: 3rem auto;

            span {
                font-size: 2.2rem;
                color: #333333;
                font-weight: 500;
            }
        }

        /*主要内容*/
        .changePassword_container_content {
            /*最后一项单元格样式修改*/
            .van-cell {
                &:nth-child(4) {
                    &::after {
                        position: absolute;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        content: ' ';
                        pointer-events: none;
                        right: 0;
                        bottom: 0;
                        left: 16px;
                        border-bottom: 1px solid #ebedf0;
                        -webkit-transform: scaleY(.5);
                        -ms-transform: scaleY(.5);
                        transform: scaleY(.5);
                    }
                }
            }
        }

        /*按钮样式*/
        .changePassword_container_btn {
            width: 90%;
            margin: 2rem auto;

            .van-button {
                width: 100%;
            }
        }
    }
</style>